import React, { useCallback, useEffect, useState } from 'react';
import { NavBar, Toast } from 'antd-mobile';
import { 
  LeftOutline, 
  CheckCircleOutline
} from 'antd-mobile-icons';
import { useNavigate } from 'react-router-dom';
import { RefundStatus, RefundReason, PaymentMethod } from './types/refund';
import type { RefundInfo, ProgressStep } from './types/refund';
import './Com/Refund.css';

const RefundSuccess: React.FC = () => {
  const navigate = useNavigate();
  const [refundInfo, setRefundInfo] = useState<RefundInfo | null>(null);
  const [loading, setLoading] = useState<boolean>(true);

  // 模拟退款信息
  const mockRefundInfo: RefundInfo = {
    refundId: 'TK202412250001',
    orderId: 'TK202412250001',
    productName: '华为 Mate 60 Pro 手机',
    refundAmount: 6999,
    applyTime: '2024-12-25 10:30:00',
    approveTime: '2024-12-26 14:20:00',
    refundTime: '2024-12-27 09:15:00',
    refundMethod: PaymentMethod.ALIPAY,
    refundAccount: '138****5678',
    refundReason: RefundReason.QUALITY_ISSUE,
    status: RefundStatus.COMPLETED
  };

  // 进度步骤
  const progressSteps: ProgressStep[] = [
    {
      title: '提交申请',
      desc: '您已成功提交退款申请',
      time: '2024-12-25 10:30:00',
      active: true
    },
    {
      title: '审核通过',
      desc: '客服已审核通过您的退款申请',
      time: '2024-12-26 14:20:00',
      active: true
    },
    {
      title: '退款处理',
      desc: '退款正在处理中',
      time: '2024-12-26 14:25:00',
      active: true
    },
    {
      title: '退款完成',
      desc: '退款金额已原路返回',
      time: '2024-12-27 09:15:00',
      active: true
    }
  ];

  // 获取退款信息
  const fetchRefundInfo = useCallback(async (): Promise<void> => {
    try {
      setLoading(true);
      // 模拟API调用
      await new Promise(resolve => setTimeout(resolve, 1000));
      setRefundInfo(mockRefundInfo);
    } catch (error) {
      Toast.show('获取退款信息失败');
      console.error('Fetch error:', error);
    } finally {
      setLoading(false);
    }
  }, []);





  // 页面加载时获取退款信息
  useEffect(() => {
    fetchRefundInfo();
  }, [fetchRefundInfo]);

  if (loading) {
    return (
      <div className="refund-page">
        <NavBar 
          className="refund-navbar"
          onBack={() => navigate(-1)}
        >
          退款详情
        </NavBar>
        <div style={{ 
          display: 'flex', 
          justifyContent: 'center', 
          alignItems: 'center', 
          height: '50vh' 
        }}>
          加载中...
        </div>
      </div>
    );
  }

  if (!refundInfo) {
    return (
      <div className="refund-page">
        <NavBar 
          className="refund-navbar"
          onBack={() => navigate(-1)}
        >
          退款详情
        </NavBar>
        <div style={{ 
          display: 'flex', 
          justifyContent: 'center', 
          alignItems: 'center', 
          height: '50vh' 
        }}>
          未找到退款信息
        </div>
      </div>
    );
  }

  return (
    <div className="refund-page">
      <NavBar 
        className="refund-navbar"
        onBack={() => navigate(-1)}
      >
        退款详情
      </NavBar>

      <div className="refund-container">
        {/* 成功状态 */}
        <div className="refund-card">
          <div className="refund-result-section">
            <CheckCircleOutline 
              className="refund-result-icon" 
              style={{ color: '#52c41a' }}
            />
            <div className="refund-result-title refund-result-success">
              退款成功
            </div>
            <div className="refund-result-desc">
              您的退款申请已处理完成
            </div>
            <div className="refund-result-amount">
              ¥{refundInfo.refundAmount}
            </div>
            <div style={{ 
              fontSize: '0.32rem', 
              color: '#999',
              marginBottom: '0.3rem'
            }}>
              退款已于 {refundInfo.refundTime} 完成
            </div>
          </div>
        </div>

        {/* 退款详情 */}
        <div className="refund-card">
          <div className="refund-header">
            <div className="refund-status-title">退款详情</div>
          </div>
          <div className="refund-order-info">
            <div className="refund-order-row">
              <span className="refund-order-label">退款单号:</span>
              <span className="refund-order-value">{refundInfo.refundId}</span>
            </div>
            <div className="refund-order-row">
              <span className="refund-order-label">订单号:</span>
              <span className="refund-order-value">{refundInfo.orderId}</span>
            </div>
            <div className="refund-order-row">
              <span className="refund-order-label">商品名称:</span>
              <span className="refund-order-value">{refundInfo.productName}</span>
            </div>
            <div className="refund-order-row">
              <span className="refund-order-label">申请时间:</span>
              <span className="refund-order-value">{refundInfo.applyTime}</span>
            </div>
            <div className="refund-order-row">
              <span className="refund-order-label">审核时间:</span>
              <span className="refund-order-value">{refundInfo.approveTime}</span>
            </div>
            <div className="refund-order-row">
              <span className="refund-order-label">退款时间:</span>
              <span className="refund-order-value">{refundInfo.refundTime}</span>
            </div>
            <div className="refund-order-row">
              <span className="refund-order-label">退款方式:</span>
              <span className="refund-order-value">{refundInfo.refundMethod}</span>
            </div>
            <div className="refund-order-row">
              <span className="refund-order-label">退款账户:</span>
              <span className="refund-order-value">{refundInfo.refundAccount}</span>
            </div>
            <div className="refund-order-row">
              <span className="refund-order-label">退款原因:</span>
              <span className="refund-order-value">{refundInfo.refundReason}</span>
            </div>
            <div className="refund-order-row">
              <span className="refund-order-label">退款金额:</span>
              <span className="refund-order-value refund-price">¥{refundInfo.refundAmount}</span>
            </div>
          </div>
        </div>

        {/* 进度追踪 */}
        <div className="refund-progress-container">
          <div className="refund-progress-header">
            <CheckCircleOutline className="refund-progress-icon" style={{ color: '#52c41a' }} />
            <div className="refund-progress-title">退款进度</div>
          </div>
          <div className="refund-progress-steps">
            {progressSteps.map((step: ProgressStep, index: number) => (
              <div key={index} className={`refund-progress-step ${step.active ? 'active' : ''}`}>
                <div className="refund-progress-dot" />
                <div className="refund-progress-content">
                  <div className="refund-progress-step-title">{step.title}</div>
                  <div className="refund-progress-step-desc">{step.desc}</div>
                  {step.time && (
                    <div className="refund-progress-step-time">{step.time}</div>
                  )}
                </div>
              </div>
            ))}
          </div>
        </div>


      </div>


    </div>
  );
};

export default RefundSuccess; 